<template>
    <el-form ref="form" label-width="100" :model="model" :rules="rules">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="请填写名称" v-model="model.name" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="标识" prop="label">
                    <el-input placeholder="请填写标识" v-model="model.label" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" placeholder="请填写备注" v-model="model.remark" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="权限">
                    <MenuCheck ref="menuCheck" @ok="handleMenuCheckOk" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item>
                    <div style="width: 100%; text-align: right">
                        <el-button type="default" @click="handleCancel">取消</el-button>
                        <el-button type="primary" @click="handleConfirm">确认</el-button>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import { addRole, updRole } from "@/api/role"
import MenuCheck from "@/components/menu-check/index.vue"

export default {
    components: {
        MenuCheck,
    },

    data() {
        return {
            model: {
                id: 0, // 为 0 为新增，否则为编辑
                name: "",
                label: "",
                remark: "",
                menuIdList: [],
            },

            rules: {
                name: [{ required: true, message: "必填" }],
                label: [{ required: true, message: "必填" }],
            },
        }
    },

    computed: {
        // 是否编辑模式
        isEditMode() {
            return this.model.id !== 0;
        },
    },

    methods: {
        /**
         * 处理 MenuCheck 组件数据获取完成
         */
        handleMenuCheckOk() {
            console.log("handleMenuCheckOk");
            // 针对 MenuCheck 组件，需要单独调用它的 set() 方法来控制勾选
            this.$refs.menuCheck.set(this.model.menuIdList)
        },
        /**
         * 设置 model 数据
         */
        setModel(model) {
            // 该操作不合适，会直接覆盖到我原本的 this.model, 导致一些属性不存在了
            // this.model = model;

            // this.model.name = model.name
            // this.model.label = model.label || ''
            // this.model.id = model.id || 0
            // this.model.menuIdList = model.menuIdList
            // ....
            Object.assign(this.model, model)

            // 针对 MenuCheck 组件，需要单独调用它的 set() 方法来控制勾选
            //    Bug: MenuCheck set 方法，必须要等到它内部的 数据获取成功之后再触发才正确。
            //        让 MenuCheck 组件，提供一个自定义事件出来
            // this.$refs.menuCheck.set(model.menuIdList);
        },

        /**
         * 取消处理
         */
        handleCancel() {
            // 通知父组件，我取消了
            this.$emit("cancel")
        },

        /**
         * 确认处理
         */
        async handleConfirm() {
            // 1. 表单校验
            await this.$refs.form.validate()
            // 2. 获取 勾选的菜单Id集合
            const menuIdList = this.$refs.menuCheck.get()
            // 3. 根据 isEditMode 来控制调用不同的接口
            if (this.isEditMode) {
                await updRole({
                    ...this.model,
                    menuIdList,
                });
            } else {
                const { id, ...model } = this.model;
                await addRole({
                    ...model,
                    menuIdList,
                });
            }
            // 3. 通知父组件，我OK了。
            this.$emit("success")
        },
    },

    unmounted() {
        console.log("unmounted")
    },
}
</script>
